<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>移动静态页面</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="static/css/sm.css">
    <style>
        #bgstyle{
            background-color: white
        }
        #blstyle {
            padding:0.75rem;
        }
        .page .bar-nav ~ .content{
            top: 4.7rem;
        }
        /* #sunm{
            opacity: 0.4
        } */
        .sunmcs{
            pointer-events: none;
            opacity:0.4;
        }
        .sunmcselse{
            pointer-events: auto;
            opacity:1;
        }
        .modal .modal-text{
            text-align: left;
            font-size: 0.75rem
        }
        .page-group .page .bar-nav ~ .content{
            top: 2.2rem;
        }
        .content .content-block-title{
            margin: 0rem 0.75rem 0.5rem;
        }
    </style>
</head>

<body>
    <div class="page-group">
        <div class="page page-current">
            <header class="bar bar-nav" id="bgstyle">
                <a class="button button-link button-nav pull-left back" href="#" data-transition='slide-out' style="color:#333">&lt;</a>
                <h1 class="title">退卡申请</h1>
            </header>
            <div class="content">
                <div id="blstyle">
                    请确认以下信息，确认无误点击同意并提交。如有疑问，请拨打全国客服电话：0371-96533
                </div>
                <div class="content-block-title">图标、标题和副标题</div>
                <div class="list-block">
                    <ul>
                        <li class="item-content">
                            <div class="item-inner">
                                <div class="item-title">姓名</div>
                                <div class="item-after">会员姓名</div>
                            </div>
                        </li>
                        <li class="item-content">
                            <div class="item-inner">
                                <div class="item-title">手机号</div>
                                <div class="item-after">1111111111</div>
                            </div>
                        </li>
                        <li class="item-content">
                            <div class="item-inner">
                                <div class="item-title">会员等级</div>
                                <div class="item-after">年卡会员</div>
                            </div>
                        </li>
                        <li class="item-content">
                            <div class="item-inner">
                                <div class="item-title">退款金额</div>
                                <div class="item-after">￥78</div>
                            </div>
                        </li>
                        <li class="item-content">
                            <div class="item-inner">
                                <div class="item-title">卡余额</div>
                                <div class="item-after">￥56</div>
                            </div>
                        </li>
                        <li class="item-content">
                            <div class="item-inner">
                                <div class="item-title">年费</div>
                                <div class="item-after">￥400</div>
                            </div>
                        </li>
                        <li class="item-content">
                            <div class="item-inner">
                                <div class="item-title">总退款</div>
                                <div class="item-after">￥455.55</div>
                            </div>
                        </li>
                        <li class="item-content">
                            <div class="item-inner">
                                <input type="CheckBox" placeholder="Your name" id="checkclick">
                                <span>我已阅读并同意<a href="#" id="agreement">《爱便利会员卡退卡协议》</a></span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="content-block">
                    <div class="row">
                        <div class="col-100">
                            <a href="#" class="button button-big button-fill button-success sunmcs" id="sunm">同意并提交</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="static/js/zepto.js"></script>
        <script src="static/js/sm.js"></script>
        <script>
            var btn = document.getElementById("checkclick");
            var sunm = document.getElementById("sunm");
            btn.onclick = function (event) {
                if (event.target.checked === true) {
                    sunm.classList.remove('sunmcs')
                    sunm.classList.add('sunmcselse')
                } else {
                    sunm.classList.remove('sunmcselse')
                    sunm.classList.add('sunmcs')
                } 
            };
            sunm.onclick = function (event) {
                console.log("====")
            }
            $(document).on('click', '#agreement', function () {
                $.alert(`1、请确认您的会员信息是否有误，确认提交会不可更改；<br/>2、请确认你的呢退款金额，该金额是按照您的卡余额（年卡则涉及年费）计算得出的金额，确认提交后不可更改；<br/>
                3、系统收到提交申请，审核通过后，客服人员将会在2-7个工作日内，将退款退还之您的微信账户中；<br/>4、若有疑问，请拨打全国客服电话：0371-96533`, '爱便利会员卡退卡协议');
            });
        </script>
</body>

</html>